<template>
  <view class="wallet-container">
    <view class="balance-card">
      <text class="label">账户余额</text>
      <text class="amount">¥ 128.80</text>
      <button class="recharge-btn">充值</button>
    </view>
    
    <view class="transaction-list">
      <view class="title">交易记录</view>
      <view class="empty-tip">暂无交易记录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style lang="scss">
.wallet-container {
  min-height: 100vh;
  background: #f5f5f5;
  
  .balance-card {
    background: linear-gradient(to right, #ff4444, #fad0c4);
    padding: 40rpx;
    color: #fff;
    
    .label {
      font-size: 28rpx;
    }
    
    .amount {
      display: block;
      font-size: 60rpx;
      font-weight: bold;
      margin: 20rpx 0;
    }
    
    .recharge-btn {
      width: 200rpx;
      font-size: 28rpx;
      background: rgba(255,255,255,0.3);
      color: #fff;
      border: 1px solid #fff;
    }
  }
  
  .transaction-list {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    .empty-tip {
      text-align: center;
      color: #999;
      padding: 100rpx 0;
    }
  }
}
</style> 